<style>
	.permission-list {
		border: solid 1px #d0d0d0;
		border-radius: 5px;
		margin: 10px 0;
		overflow: hidden;
	}

	.permission-list dt {
		background-color: #efefef;
		padding: 5px 10px;
		border-bottom: 1px solid #d0d0d0;
	}

	.permission-list label {
		display: block;
		margin-bottom: 0;
		-webkit-transition: all ease 0.5s;
		-moz-transition: all ease 0.5s;
		-o-transition: all ease 0.5s;
		transition: all ease 0.5s;
	}

	.permission-list label:hover {
		background-color: #f0f0f0;
	}

	.permission-list input {
		float: left;
		margin-top: 4px;
		margin-right: 15px;
	}

	.permission-list dd {
		padding: 0px 10px;
	}

	.permission-list dd label {
		padding: 3px 15px;
		border-bottom: 1px dashed #f0f0f0;
		font-weight: normal;
	}

	.permission-list dl {
		padding: 10px;
		margin: 0;
	}
</style>
<div class="content_box" ng-scrollbars>
	<h1 class="page_tit">
		<a class="page_nav" href="javascript:void(0)" ng-click="returnPage()">角色管理</a>
		<i class="iconfont icon-jiantou1"></i>
		<span class="page_current_name">新增角色</span>
		<a class="return_page fr" ng-click="returnPage()">
			<i class="iconfont icon-fanhui"></i>返回</a>
	</h1>


	<form class="form-horizontal" name="roleInfoForm">

		<div class="form-group" ng-class="{'has-error':roleInfoForm.name.$touched&&roleInfoForm.name.$invalid}">
			<label class="col-sm-1 control-label nowrap">角色名称:</label>
			<div class="col-sm-5">
				<input type="text" class="form-control" required name="name" minlength="2" maxlength="20" ng-pattern="/^[a-zA-Z0-9]+$/" ng-model="roleInfo.name"
				 placeholder="请输入角色名称">
			</div>
			<div class="col-sm-4">
				<p class="form_error_info" ng-show="roleInfoForm.name.$touched&&roleInfoForm.name.$error.required">
					角色名称不能为空！</p>
				<p class="form_error_info" ng-show="roleInfoForm.name.$touched&&(roleInfoForm.name.$error.minlength||roleInfoForm.name.$error.maxlength||roleInfoForm.name.$error.pattern)">
					角色名称长度必须为2-20个字符，大小写英文字符或数字！</p>
			</div>
		</div>

		<div class="form-group" ng-class="{'has-error':roleInfoForm.comment.$touched&&roleInfoForm.comment.$invalid}">
			<label class="col-sm-1 control-label nowrap">备注:</label>
			<div class="col-sm-5">
				<textarea class="form-control" required name="comment" minlength="2" maxlength="20" ng-pattern="/^[\u4e00-\u9fa5a-zA-Z0-9]+$/" ng-model="roleInfo.comment"
				 placeholder="请输入备注"></textarea>
			</div>
			<div class="col-sm-4">
				<p class="form_error_info" ng-show="roleInfoForm.comment.$touched&&roleInfoForm.comment.$error.required">
					备注不能为空！</p>
				<p class="form_error_info" ng-show="roleInfoForm.comment.$touched&&(roleInfoForm.comment.$error.minlength||roleInfoForm.comment.$error.maxlength||roleInfoForm.comment.$error.pattern)">
					备注长度必须为2-20个字符，大小写中英文字符或数字！</p>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-1 control-label nowrap">角色功能:</label>
			<div class="col-sm-11">
				<dl class="permission-list" ng-repeat="x in groups">
					<dt>
						<label>
							<input type="checkbox" value="" name="user-Character-0" id="user-Character-0" ng-model="x.hasChecked" ng-click="checkAll(x.id, x.hasChecked)"> {{x.id}}
						</label>
					</dt>
					<dd>
						<dl class="cl permission-list2">
							<dd>
								<label class="m-tb-10 mr10 text-over" ng-repeat="c in competences | filter:{flag: x.id + 'FLAG'} " style="display: block"
								 title="{{c.resource}}">
									<input type="checkbox" ng-model="c.hasChecked" ng-click="singleClick(c.resource)"> {{c.comment}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{c.resource}}
								</label>
							</dd>
						</dl>
					</dd>
				</dl>
			</div>
		</div>



	</form>

	<div class="btn_box col-sm-5">
		<button class="me-btn" ng-click='registerCompetence()' has-permission="/v1/roles/add&POST" ng-disabled="!roleInfoForm.$valid"
		 ng-class="{disBtn:!roleInfoForm.$valid}">保存
		</button>
		<button class="me-btn" ng-click="returnPage()">取消</button>
	</div>

</div>